import React, {useCallback} from 'react';
import {View, StyleSheet, Text, TouchableHighlight} from 'react-native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
import {useNavigation, useRoute} from '@react-navigation/native';
import PatIcon from '../base/PatIcon';

const SearchType = () => {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {params} = useRoute();
  const goCategroy = useCallback(() => {
    navigation.navigate('category');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (params && params.type === 'category') {
    return null;
  } else {
    return (
      <TouchableHighlight
        onPress={goCategroy}
        activeOpacity={1}
        underlayColor={Colors.white}>
        <View style={styles.searchType}>
          <View style={styles.typeLeft}>
            <PatIcon name="side-spread" size={16} color={Colors.patFontGray} />
            <Text style={styles.txt}>{t('category.all')}</Text>
          </View>
          <PatIcon name="arrow-right" size={12} color={Colors.patFontGray} />
        </View>
      </TouchableHighlight>
    );
  }
};

const styles = StyleSheet.create({
  searchType: {
    marginTop: 20,
    height: 50,
    width: '100%',
    backgroundColor: Colors.width,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: Colors.patBg,
  },
  typeLeft: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
  },
  txt: {
    fontSize: 12,
    marginLeft: 10,
    borderColor: Colors.patFontColor,
  },
});

export default SearchType;
